<template>
    <div style="width:100%">
        <el-dialog :visible.sync="visible" title="预览报告" width="90vw" top="" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @close="onClose">
            <iframe id="xlsx_incoming" :src="pdfUrl" frameborder="0" style="width: 100%; height: 600px" type="application/x-google-chrome-pdf"></iframe>
            <div slot="footer">
                <el-button size="mini" type="default" icon="el-icon-close" @click="handleClose">{{ $t("btn.close") }}</el-button>
                <el-button size="mini" type="primary" icon="el-icon-download" @click="handleConfirm">下载报告</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'DivisionDialog',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        pdfUrl: {
            type: String
        },
        asyncFile:{
            type: Object
        }
    },
    data() {
        return {
            title: '',
        }
    },
    methods: {
        // 窗口关闭
        onClose() {},
        handleConfirm(){
            this.asyncFile.saveAs(this.asyncFile.blob,this.asyncFile.filename)
            this.$message.success("下载成功");
        },
        handleClose() {
            this.$emit('update:visible',false)
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible',false)
        }
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__footer {
    text-align: center;
}
::v-deep .el-dialog{
    height: 100vh;
    .el-dialog__body{
        max-height: 90%;
    }
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
#xlsx_incoming ::v-deep tr td {
    border: 1px solid #ccc;
    text-align: center;
}
</style>
